<template>
  <XnDialog :visible.sync="selfVisible" title="问卷列表" custom-class="account-list" top="6vh" @close="closeDialog">
    <div class="account-list-main">
      <div class="search-box">
        <el-input
          v-model="searchForm.keyword"
          placeholder="搜索关键词"
          maxlength="50"
          size="small"
          style="width: 220px"
          clearable
          @change="onSearch">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="account-list-content">
        <div class="table-box">
          <vxe-table
            align="center"
            size="medium"
            highlight-hover-row
            resizable
            border
            stripe
            :data="userList"
            :header-cell-class-name="headerStyle"
            :row-class-name="rowClass"
            height="100%"
            class="table-con">
            <vxe-column field="orderNum" title="序号" width="80"></vxe-column>
            <vxe-column field="loginName" title="账号" min-width="150"></vxe-column>
            <vxe-column field="userName" title="姓名" min-width="120"></vxe-column>
            <vxe-column field="telephone" title="手机号" width="150"></vxe-column>
            <vxe-column field="createTime" title="创建日期" width="150"></vxe-column>
            <vxe-column field="orgName" title="所属单位" min-width="150"></vxe-column>
            <vxe-column field="postName" title="职位" min-width="150"></vxe-column>
            <vxe-column field="userStatusName" title="状态" width="100"></vxe-column>
          </vxe-table>
        </div>
        <pagination
          :current-page.sync="pageIdx"
          :page-size.sync="pageSize"
          :total="totalSize"
          @currentChange="onCurrentChange"></pagination>
      </div>
    </div>
  </XnDialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'
import pagination from '@com/pagination.vue'
import { listUserData } from '@api/modules/system.js'
export default {
  name: 'AccountDialog',
  components: { XnDialog, pagination },
  emits: ['close', ''],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selfVisible: false,
      pageIdx: 1,
      pageSize: 10,
      totalSize: 0,
      userList: [],
      searchForm: {
        keyword: '',
      },
    }
  },
  watch: {
    info: {
      handler(obj) {
        if (obj && obj.id) {
          this.getAccountLit()
        }
      },
      deep: true,
      immediate: true,
    },
    visible(bool) {
      this.selfVisible = bool
    },
  },
  methods: {
    closeDialog() {
      this.pageIdx = 1
      this.pageSize = 10
      this.totalSize = 0
      this.userList = []
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    async getAccountLit() {
      const { status, data } = await listUserData({
        pageNum: this.pageIdx,
        pageSize: this.pageSize,
        key: this.searchForm.keyword,
        tenantId: this.info.tenantCode,
      })
      if (status === 200 && data) {
        const userList = data.content || []
        this.totalSize = data.totalSize || 0
        userList.forEach((item, inx) => {
          item.orderNum = this.pageSize * (this.pageIdx - 1) + (inx + 1)
        })
        this.userList = userList
      } else {
        this.totalSize = 0
        this.userList = []
      }
    },
    onCurrentChange() {
      this.getAccountLit()
    },
    onSearch() {
      this.pageIdx = 1
      this.pageSize = 10
      this.getAccountLit()
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>
<style lang="scss" scoped>
.account-list {
  ::v-deep &.el-dialog {
    width: 80%;
    max-width: 1200px;
    height: 85vh;

    .account-list-main {
      position: relative;
      .search-box {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .el-select {
          width: 180px;
          margin-right: 12px;
        }
        .el-input {
          .el-icon-search {
            cursor: pointer;
          }
        }
      }
      .account-list-content {
        height: calc(100vh - 240px);
        display: flex;
        flex-direction: column;
        .table-box {
          flex: 1;
          position: relative;

          .table-con {
            ::v-deep .headerStyle {
              background-color: #f0f4f9;

              .vxe-cell {
                color: #333333;
                font-size: 14px;

                span {
                  font-weight: 600;
                }
              }
            }

            ::v-deep .rowClass {
              .vxe-cell {
                color: #666666;
                font-size: 14px;

                p,
                div,
                span {
                  font-size: 14px;
                }
              }
            }
          }
        }
        .bg-pagination {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
